<template>
	<view class="home-navs">
		<view class="entry">
			<view
				class="entry-item"
				v-for="item in entries"
				:key="item.value"
				@click="onclickLink(item.cb)"
			>
				<view class="icon">
					<u-icon
						:name="item.icon"
						custom-prefix="icon"
						size="60"
					/>
				</view>
				<view class="label small">{{item.label}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getCompetitions } from '@/utils/buffer'
export default {
  data() {
    return {
      competitions: [],
      showIndex: 0, // 展示的竞赛下标
      entries: [
        { label: '区域特色', value: 'Consult', icon: 'shouye', cb: () => this.$router.navigateToConsultList() },
        { label: '资源共享', value: 'courseDesign', icon: 'xinrenkecheng', cb: () => this.$router.navigateToProjects('courseDesign') },
        { label: '成果展示', value: 'competitionProject', icon: 'menu_jsdt', cb: () => this.$router.navigateToProjects('competition') },
      ],
    }
  },
  computed: {
    hotCompetitions() {
      return this.competitions.filter(item => item.selectedSeasonHot)
    }
  },
  async created() {
    this.competitions = await getCompetitions()
    setInterval(() => {
      this.computedShowIndex()
    }, 2000)
  },
  methods: {
    onclickLink(cb) {
      cb()
    },
    /**
     * 计算展示的比赛下标
     */
    computedShowIndex() {
      if (this.showIndex === this.hotCompetitions.length - 1) {
        this.showIndex = 0
      } else {
        [
          this.showIndex++
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home-navs {
  .competition {
    color: #ffffff;
    border-radius: $radiusLarge $radiusLarge 0 0;
    // box-shadow: 0 2px 6px rgba(178, 199, 255, 1);

    .hot {
      height: 61px;
      overflow: hidden;
      background-color: $primary2;

      .competition-name {
        height: 61px;
        padding: 20px 15px;
        transition: 1s;
      }
    }

    .footer {
      padding: 10px 15px;
      background-color: $primary3;
    }
  }

  .entry {
    display: flex;
    padding: 20px 0;
    margin: 0 20px;
    border-bottom: 1px dotted #c4c3c5;

    &-item {
      flex: 1;
      text-align: center;

      .icon {
        width: 40px;
        height: 40px;
        margin: auto;
        margin-bottom: 8px;
      }
    }
  }
}
</style>
